<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="题型">
        <el-select v-model="form.qType" placeholder="请选择题目类型" @change="handleChange">
          <el-option label="选择题" value="1" />
          <el-option label="判断题" value="3" />
          <el-option label="填空题" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="题目内容" prop="title">
        <el-input v-model="form.title" style="width: 500px" type="textarea" />
      </el-form-item>
      <template v-if="form.qType === '3'">
        <el-form-item label="题目选项">
          <el-input v-model="form.options" placeholder="请将选项以英文符号|隔开，例如：经营|生产|党建|党群" type="textarea" />
        </el-form-item>
      </template>
      <template v-else-if="form.qType === '2'" />
      <template v-else-if="form.qType === '1'">
        <el-form-item label="题目选项">
          <el-input v-model="form.options" placeholder="请将选项以英文符号|隔开，例如：经营|生产|党建|党群" type="textarea" />
        </el-form-item>
      </template>
      <el-form-item label="分值">
        <el-input-number v-model="form.scoreValue" :min="1" label="题目的分值" />
      </el-form-item>
      <el-form-item label="是否可用">
        <el-switch v-model="form.isValid" :active-value="1" :inactive-value="0"/>
      </el-form-item>
      <el-form-item label="归属模板">
        <el-select v-model="form.templateId" placeholder="请选择" size="mini">
          <el-option
            v-for="item in templateList"
            :key="item.id"
            :label="item.templateName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="题目答案" prop="answer">
        <el-radio-group v-model="form.correctAnswer" size="mini">
          <el-radio v-for="(item,index) in optionList" :label="String.fromCharCode(index+ 65)">
            {{ item }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button v-if="action === 'add'" type="primary" @click="add">立即创建</el-button>
        <el-button v-else-if="action === 'update'" type="warning" @click="update">更新题目</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getTemplateList, getTemplateDetail } from '@/api/template'
import { saveQuestion, alterQuestion } from '@/api/question'

export default {
  props: ['templateId', 'examInfo', 'action'],
  data() {
    return {
      form: {
        examId: '',
        title: '',
        qType: '',
        options: '',
        isValid: '',
        type: [],
        templateId: '',
        correctAnswer: '',
        resource: '',
        desc: '',
        scoreValue: 3
      },
      templateList: []
    }
  },
  computed: {
    optionList: function() {
      if (this.form.options === '') {
        return null
      }
      const list = this.form.options.split('|')
      return list
    }
  },
  watch: {
    'form.options': {
      handler: function(n, o) {
        this.form.options = n
        console.log(n, o)
      }
    }
  },
  mounted() {
    if (this.examInfo.examId != '') {
      this.form = this.examInfo
    }
    getTemplateList().then(res => {
      this.templateList = res.data
    })
  },
  methods: {
    add() {
      saveQuestion(this.form).then(res => {
        this.$message.info(res.data)
      })
    },
    handleChange() {
      console.log(this.form.qType)
      if (this.form.qType === '3') {
        this.form.options = '对|错'
      }
      if (this.form.qType === '1') {
        this.form.options = ''
      }
    },
    update() {
      alterQuestion(this.form).then(res => {
        this.$message.info(res)
      })
    }
  }
}
</script>
